import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { NavBar } from 'antd-mobile'
import { Input, Cell, Button } from 'react-vant'
import { Lock } from '@react-vant/icons';
import '../css/Gzh_Login.scss'
import { post } from '../../../axios/request'
export default function PwdLogin() {
  const navgate = useNavigate()
  const [tel, setTel] = useState('')
  const [pwd, setPwd] = useState('')
  const login = async () => {
    const {code,token,phone}= await post('/login', { tel, pwd })
    if (code===200) {
      localStorage.setItem('token', token)
      localStorage.setItem('tel',phone)
      navgate('/app')
    } else {
      alert('登录失败')
    }
  }
  return (
    <div id='login'>
      <NavBar onBack={() => { navgate('/app') }}
        style={{ '--border-bottom': '1px #eee solid' }}
      ></NavBar>
      <h1 style={{ marginLeft: '0.4rem', fontSize: '.619rem', fontWeight: 'bold', marginTop: '0.3rem' }}>密码登录</h1>
      <Cell>
        <Input
          prefix="+86"
          value={tel}
          style={{ borderBottom: '1px #71acfd solid', height: '1rem' }}
          onChange={text => setTel(text)}
          placeholder='请输入手机号码'
          clearable
          maxLength={11}
        />
      </Cell>
      <Cell>
        <Input
          prefix={<Lock style={{ width: '0.5rem' }} />}
          value={pwd}
          style={{ borderBottom: '1px #ccc solid', height: '1rem', }}
          onChange={text => setPwd(text)}
          placeholder='请输入密码'
          clearable
          type='password'
        />
      </Cell>
      <div className='login_btn'>
        <Button  onClick={()=>{login()}} style={{ width: '8rem', margin: '0.5rem auto', height: '1rem', backgroundColor: tel && pwd ? '#1778fb' : '#ccc', border: 'none' }} type='primary' block round> 登录</Button>
      </div>
      <div className='login_text' style={{ display: 'flex', fontSize: '0.4rem', justifyContent: 'space-between', padding: '0 0.5rem' }}>
        <p onClick={() => { navgate('/login') }}>验证码登录</p>
        <p onClick={() => { navgate('/forgetpwd') }}>忘记密码？</p>
      </div>
      <div className='login_bottom'>
        <span style={{ fontSize: '0.3rem' }}>登录即同意<span style={{ color: '#1778fb' }}>《用户服务协议》</span>和<span style={{ color: '#1778fb' }}>《隐私政策》</span></span>
      </div>
    </div>
  )
}
